<template>
	<view class="case">
		<block v-if="show">
			<view class="case-tabs">
				<u-tabs :list="caseSort" :current="caseIndex" active-color="#141414" name="style_name" font-size="28" inactive-color="#757575" @change="changeCaseTab">
				</u-tabs>
			</view>
			<view style="padding-top: 80rpx;">
				<view class="case-list" style="padding-bottom: 30rpx;">
					<pt-case :list="caseList" name="case_name" @goInfo="goCaseInfo"></pt-case>
				</view>
				<pt-nothing 
					text="暂无案例" 
					:fixed="true" 
					v-if="noCaseMore && !caseList.length" 
					icon="https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/images/shop/icons/nothing.png?v=1">
				</pt-nothing>
				<pt-loading-more v-if="isLoading"></pt-loading-more>
				<pt-nomore v-if="noCaseMore && caseList.length"></pt-nomore>
			</view>
		</block>
		<pt-loading></pt-loading>
	</view>
</template>

<script>
	export default {
		props: {
			list: {
				type: Array,
				default () {
					return []
				}
			}
		},
		data() {
			return {
				show: false,
				name: 'case_name',
				// 案例参数
				caseSort: [],
				caseStyleId: '',
				caseIndex: 0,
				caseList: [],
				casePage: 0,
				isLoading: false,
				noCaseMore: false,
				timer: '',
				store_id: '',
				is_shelf: false
			};
		},
		onLoad(options) {
			if(options.is_shelf){
				this.is_shelf = options.is_shelf
			}
			if(options.store_id){
				this.store_id = options.store_id
			}
			this.getCase()
		},
		onReachBottom() {
			if (!this.noCaseMore) {
				this.isLoading = true
				this.casePage++
				this.getCase()
			}
		},
		methods: {
			// 获取案例
			getCase() {
				this.$u.apiWei.ExampleCaseList({
					store_id: this.store_id,
					page: this.casePage,
					style_id: this.caseStyleId
				}).then(res => {
					this.show = true
					this.isLoading = false
					if (!this.caseSort.length) {
						this.caseSort = res.datas.style_list
					}
					if (res.datas.list.length) {
						res.datas.list.forEach(item => {
							this.caseList.push(item)
						})
					} else {
						this.noCaseMore = true
					}
				})
			},
			goCaseInfo(e) {
				uni.navigateTo({
					animationDuration: 500,
					url: '/pages/case-list/case-details/case-details?case_id=' + e
				})
				if(this.is_shelf){
					this.addFoot('首页-货架-案例推荐-详情')
				}
			},
			changeCaseTab(e) {
				this.caseStyleId = this.caseSort[e].style_id
				this.caseIndex = e
				this.caseList = []
				this.casePage = 0
				this.noCaseMore = false
				this.getCase()
			},
			addFoot(where,detail){
				this.$u.api.AddFoot({
					// #ifdef MP-WEIXIN
					type: 1,
					// #endif
					// #ifdef APP-PLUS
					type: 2,
					// #endif
					// #ifdef H5
					type: 3,
					// #endif
					store_id: uni.getStorageSync('userInfo')?JSON.parse(uni.getStorageSync('userInfo')).store_id:'',
					client: 1,
					where: where,
					stay_time: 0,
					goods_id: 0,
					store_goods_id: 0,
					is_new: 1,
					detail: detail?detail:''
				})
			}
		}
	}
</script>

<style lang="scss">
	.case {
		.case-tabs {
			border-bottom: solid 2rpx #F7F7F7;
			position: fixed;
			left: 0;
			right: 0;
			background-color: #FFF;
			z-index: 10;
		}
	}
</style>
